/*
.slide-nav-li>.p1
.m-gamefunc-nav .p2

x > .other 代表x中所有other类
x > p 代表x中所有p的元素
.x .other 代表x以及子元素中所有other类

*/

.ultest2{
    width: 1258px;
    height: 100px;
    margin: 0 auto;
}
.ultest2-ul{
    float: left;
    width: 60%;
}
.ultest2-ul>li{
    float:left;
    width: 20%;
    display: inline-block;
}/*测试*/

/*默认所有部件布局是 0 0*/
*{
    margin: 0;
    padding: 0;
}

body{
    min-width:1230px;
    overflow-anchor:none;
    background-color:#eee;
    *zoom:1
}
body, button, input, select, textarea {
    font: 12px/1.5 tahoma,'\5FAE\8F6F\96C5\9ED1',sans-serif;
}

ul,menu,dir{
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-block-start: 40px;
}

li {
    display: list-item;
    text-align: -webkit-match-parent;
}


/*Main内容*/
.g-zoombox{
    width:100%;
    min-width:1358px;
    height:auto;
    margin:0 auto;
}

/*主要部分的布局实现*/
/*内容*/
.g-index-wrap1{
    width: 1358px;
    height: auto;
    margin: 0 auto;
    padding: 40px 0 80px 0;
}
/*Content:’\20’;的意思是在.clear这个元素的后面加上一个空格，这整段CSS是在浏览器中创建一个分隔栏，
把上下DIV隔开，避免DIV发生错位。但是如果单纯使用clear:both的话，就会产生一些浏览器兼容上的bug*/
.g-index-wrap1:after{
    content:'\20';
    display:block;
    height:0;
    line-height:0;
    visibility:hidden;
    clear:both
}
    /*轮播图*/
.m-prome{
    float: left;
    width: 820px;
    height: 380px;
    overflow: hidden;
    position: relative;
    background-color: #e3e2e2;
}
    /*轮播图图片列表 ul*/
.prome-item-list{
    width: 4100px;
    height: 340px;
    overflow: hidden;
    position: relative;
    margin: 0;
    padding: 0;
}
    /*轮播图图片列表 子项*/
.prome-item-list>li{
    float: left;
    list-style: none;
    overflow: hidden;
    width: 820px;
    height: 340px;

}
    /*轮播图图片列表 子项 中的 li>a>img图片的大小*/
.prome-item>img{
    width: 820px;
    height: 340px;
}

    /*轮播图下的 标题*/
.prome-title-list{
    width: 820px;
    height: 40px;
    overflow: hidden;
}

    /*轮播图下的 标题描述*/
.prome-title-list>span{
    float: left;
    width: 164px;
    height: 40px;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 40px;
    color: #122b40;
    text-align: center;
    width: 164px;
}

    /*轮播图下的 标题 被选中*/
.span_select{
    float: left;
    width: 164px;
    height: 40px;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 40px;
    text-align: center;
    width: 164px;
    color: #ab8a66;
    border-bottom: 2px solid #ab8a66;
}


/*新闻模块*/
.m-news{
    float: right;
    overflow: hidden;
    position: relative;
    width: 496px;
    height: 380px;
}

    /*新闻标题大小 可以画一条低线*/
.m-news-tab{
    width: 496px;
    height: 35px;
    overflow: visible;
    border-bottom: 1px solid #e0e2e2;
    box-sizing: border-box;
}
    /*新闻的种类 ul */
.m-news-title{
    margin: 0;
    padding: 0;
    width:596px;
    height: 35px;
    left: 0;
    position: absolute;
}
    /*新闻的种类 ul 的 li*/
.m-news-title>li{
    font-size: 18px;
    line-height: 24px;
    float: left;
    text-align: center;
    width: auto;
    height: 37px;
    margin-right: 74px;
    color: #5e5e5e;
    cursor: pointer;
    position: relative;
    list-style: none;
    overflow: visible;
}
    /*标题 子元素 li 选中要变色*/
.m-news-title>li.select,.m-news-title>li:hover{
    font-weight: 700;
    color: #1da6ba;
    border-bottom: 2px solid #1da6ba;
}
    /*新闻内容*/
.m-news-content{
    width: 496px;
    height: 305px;
    z-index: 12;
}
    /*因为没有用后端传输数据 先将其他标题下的 li 隐藏*/
.m-news-content-ul{
    display: none;
}

    /*class:m-news-content 的 子元素ul 有 class:select */
    /*显示所选的 内容*/
.m-news-content>ul.select{
    width: 496px;
    height: 305px;
    margin: 0;
    padding: 0;
    overflow: visible;
    display: block;
}

    /* class: m-news-content-ul 的 子元素 有 class：frist*/
    /*li 的 第一条加粗 变色 显示 类似于头条*/
.m-news-content-ul>.frist{
    width: 496px;
    height: 59px;
    text-align: center;
    font-size: 22px;
    line-height: 59px;
    color: #0da0b4;
    font-weight: 700;
    overflow: hidden;
    border-bottom: 1px solid #e0e2e2;
}

.newsitem{
    display: inline-block;
    width: 496px;
    height: 40px;
    border-bottom: 1px solid #e0e2e2;
    list-style: none;
    overflow: hidden;

}
    /*新闻li 的类型 变色*/
.newsitem>.item-type{
    display: inline-block;
    width: 30px;
    height: 20px;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
    vertical-align: center;
    color: #6388c5;
    border: 1px #97afc5 solid;
}
    /*新闻li 的 概述 */
.newsitem>div{
    display: inline-block;
    width: 370px;
    height: 40px;
    font-size: 14px;
    line-height: 40px;
    text-align: left;
    padding-left: 20px;;
}
    /*新闻li 的 时间*/
.newsitem>.item-time{
    display: inline-block;
    text-align: right;
    width: 50px;
    height: 39px;
    color: #9d9d9d;
}
    /*了解更多信息*/
.btn-info{
    display: block;
    width: 496px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color:  #e0e2e2;
}

.btn-info:hover{
    display: block;
    width: 496px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: #e3e3e3;
}
    /*btn 描述*/
.btn-info>.c1 {
    font-size: 14px;
    color: #676767;
}
    /*btn 描述2*/
.btn-info>.c2{
    font-size: 14px;
    color: #7ea1a6;
}

.more-arrow{
    display: inline-block;
    vertical-align: middle;
    margin: -2px 0 0 5px;
    -webkit-animation: 1.5s linear infinite;
}
.more-arrow {    background-image: url(//game.gtimg.cn/images/lol/v3/comm-spr.png);
    background-size: 393px 200px;
    background-repeat: no-repeat;
}

/*活动模块*/
.m-act{
    float: left;
    width: 820px;
    height: 335px;
    margin-top:50px;
}
    /*活动tab*/
.m-act-tab{
    float: left;
    width: 100%;
    height: 35px;
    position: relative;
    display: inline-block;
}
    /*活动的标题1*/
.m-act-tab-h2{
    float: left;
    font-size: 24px;
    width: 200px;
    height: 26px;
    line-height: 26px;
    border-left: 3px solid #0da0b4;
    box-sizing: border-box;
    padding: 0 0 0 10px;
    margin: 0;
}
    /*活动的标题2 用于限制 ul 以及border bottom*/
.m-act-tab-title{
    width: 692px;
    position: absolute;
    height: 35px;
    left: 128px;
    box-sizing: border-box;
    border-bottom: 1px #e0e2e2 solid;
}
    /*活动的标题 ul*/
.m-act-tab-ul{
    padding: 0;
    margin: 0;
    float: left;
    box-sizing: border-box;
    vertical-align: center;

}

    /*活动tab ul的li*/
.m-act-tab-ul>li{
    margin-right: 40px;
    list-style: none;
    float: left;
    position: relative;
    font-size:16px ;
    line-height: 30px;
    height: 36px;
    overflow: visible;
    text-align: center;
    vertical-align: center;

}
    /*活动tab ul的li 选择变色*/
.m-act-tab-ul>li.select,.m-act-tab-ul>li:hover{
    color: #0da0b4;
    font-weight: 500;
    border-bottom: 2px solid #0da0b4;
}
    /*了解更多*/
.m-act-tab-a{
    line-height: 30px;
    float: right;
    font-size: 14px;
    color: #0da0b4;
}
    /*内容列表*/
.m-act-list{
    width: 820px;
    height: 278px;
    margin-top: 25px;
}
    /*活动list 将不用先隐藏*/
.m-act-list>ul{
   /* width: 840px;
    height: 278px;
    position: relative;*/
    display: none;
}
    /*选中就出现*/
.m-act-list>ul.select{
    width: 840px;
    height: 278px;
    position: relative;
    display: block;
}
    /*内容 子类*/
.m-act-item{
    float: left;
    list-style: none;
    margin-right: 16px;
    width: 193px;
    height: 278px;
    position: relative;
    overflow: hidden;
    background-color: #fefefe;
}
    /*在外面定义了 img width 193px height:207px */
.m-act-item>p{
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    padding: 0px 4px 4px 10px;
    font-size: 14px;
    line-height: 16px;
    text-align: left;
}
    /*图片下的时间*/
.m-act-item>.overtime{
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    font-size: 12px;
    padding-left: 10px;
    bottom: 4px;
    color: #1da6ba
}
    /*点击后图片跳转*/
.herf-mask {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    font-size: 0;
}

/*按钮导航*/
.m-gamefunc-nav{
    float: right;
    width: 496px;
    height: 335px;
    margin-top: 50px;
    position: relative;
}
    /*ul 设置 其下 li 的样式*/
.slide-nav-li{
    list-style: none;
    margin: 0;
    padding: 0;
}
    /*水平*/
.slide-nav-li>li{
    float: left;
}
/*第一个按钮*/
.m-gamefunc-nav>.herf-down{
    width: 366px;
    height: 168px;
    overflow: hidden;
    background-image: url(//game.gtimg.cn/images/lol/v3/pic-download.png);
    position: relative;
}
    /*第一个按钮*/
.side-down-video{
    display: block;
    width: 366px;
    height: 168px;
}
    /*官方图标*/
.btn-flashmen{
    position: relative;
    background-image: url(//game.gtimg.cn/images/lol/v3/index-spr.png);
    background-size: 638px 572px;
    background-repeat: no-repeat;

}
    /*第2 3个图标*/
.btn-flashmen{
    background-position: -193px -316px;
    width: 118px;
    height: 76px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    line-height: 76px;
    overflow: hidden;
}
    /* > 代表子元素*/
    /*第2 3个 按钮 需要调整布局 */
.slide-nav-li>.p1{
    margin-left: 12px
}

.m-gamefunc-nav .p2{
    margin: 17px 0 0 12px;
}
    /*其他按钮*/
.m-gamefunc-nav .p3{
    font-weight: 300;
    margin-top: 15px;
    margin-right:14px ;
    float: left;
    width: 110px;
    height: 68px;
    color: #424242;
    text-align: center;
    line-height: 68px;
    background-color: #fefefe;
}


/*右边导航栏*/
    /*向右偏移*/
.right-nav{
    right: 0;
}
.right-nav{
    margin: 0;
    padding: 0;
    width: 70px;
    height: auto;
    box-sizing: border-box;
    position: fixed;
    overflow: hidden;
    bottom: 18%;
    background-color: #fff;
    border-radius: 9px 0 0 9px;
    z-index: 199;
}
    /*设置没有其他补白*/
.right-nav>ul{
    margin: 0;
    padding: 0;
}
    /*li*/
.right-nav-li{
    list-style: none;
    width: 66px;
    text-align: center;
    margin-bottom: 6px;
}

    /*用于放置icon*/
.right-nav-li>span{
    list-style: none;
    width: 66px;
    display: block;
    height: 35px;
    line-height: 35px;
    text-align: center;
    margin-top: 15px;
    margin-bottom: 10px;
}
    /*各个icon 布局*/
.right-nav-i1,.right-nav-i2,.right-nav-i3,.right-nav-i4,.right-nav-i5,right-nav-i6{
    width: 22px;
    height: 26px;
    display: inline-block;
    vertical-align: middle;
    background-image: url(//game.gtimg.cn/images/lol/v3/comm-spr.png);
    background-size: 393px 200px;
    background-repeat: no-repeat;
}
.right-nav-i1{
    background-position: -216px -99px;

}
.right-nav-i2{
    background-position: -262px -99px;
}
.right-nav-i3{
    background-position: -220px -46px;
}
.right-nav-i4{
    background-position: -269px -72px;
}
.right-nav-i5{
    background-position: -287px -12px;
}
.right-nav-i6{
    background-position: -193px -12px;
}